<!-- 人员档案详情 -->
<template>
  <view class="main">
    <u-navbar title="人员档案详情" back-icon-color="#333" title-color="#000"></u-navbar>
    <view class="u-flex-1 ui flex column">
      <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" height="100" active-color="#0F643A">
      </u-tabs-swiper>
      <view class="u-flex-1 ui flex column">
        <swiper class="h-100p" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
          <swiper-item class="swiper-item">
            <firm v-if="swiperCurrent === 0" :dataMsg="dataMsg"></firm>
          </swiper-item>
          <swiper-item class="swiper-item">
            <basic v-if="swiperCurrent === 1" :dataMsg="dataMsg"></basic>
          </swiper-item>
          <swiper-item class="swiper-item">
            <work v-if="swiperCurrent === 2" :dataMsg="dataMsg"></work>
          </swiper-item>
          <swiper-item class="swiper-item">
            <certificate v-if="swiperCurrent === 3" :dataMsg="dataMsg.certificateInfoVoList"></certificate>
          </swiper-item>
          <swiper-item class="swiper-item">
            <job v-if="swiperCurrent === 4" :dataMsg="dataMsg.employeeWorkExperienceInfoVos"></job>
          </swiper-item>
          <swiper-item class="swiper-item">
            <crime v-if="swiperCurrent === 5" :dataMsg="dataMsg.criminalRecordVos"></crime>
          </swiper-item>
          <swiper-item class="swiper-item">
            <train v-if="swiperCurrent === 6" :dataMsg="dataMsg.employeeTrainings"></train>
          </swiper-item>
          <swiper-item class="swiper-item">
            <contract v-if="swiperCurrent === 7" :dataMsg="dataMsg.employeeAgreements"></contract>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import firm from './components/firm.vue'
import basic from './components/basic.vue'
import work from './components/work.vue'
import certificate from './components/certificate.vue'
import job from './components/job.vue'
import crime from './components/crime.vue'
import train from './components/train.vue'
import contract from './components/contract.vue'

export default {
  components: { firm, basic, work, certificate, job, crime, train, contract },
  data () {
    return {
      current: 0,
      swiperCurrent: 0,
      employeeId: '',
      dataMsg: {},// 基本信息
      list: [
        {
          name: '企业信息'
        },
        {
          name: '基本信息'
        },
        {
          name: '学历信息'
        },
        {
          name: '资格证书'
        },
        {
          name: '工作经历',
        },
        {
          name: '犯罪记录',
        },
        {
          name: '培训经历',
        },
        {
          name: '合同附件'
        }
      ],
    };
  },
  methods: {
    /**
     * 请求数据
     */
    async getData () {
      const {body} = await this.$get(`/emplyee/findEmployeeInfoById?employeeId=${this.employeeId}`)
      if (body) {
        if (body.isMineWork === '1') {
          body.isMineWork = '是'
        } else if (body.isMineWork === '0') {
          body.isMineWork = '否'
        }
        if (body.educationType === '1') {
          body.educationType = '全日制'
        } else if (body.educationType === '2') {
          body.educationType = '非全日制'
        }
        this.dataMsg = body
      }
    },
    tabsChange (index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition (e) {
      const dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish (e) {
      const current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
  },
  onLoad (options) {
    this.employeeId = options.employeeId
    this.getData()
  }
};
</script>

<style lang="scss" scoped></style>
